<template>
  <div class="content_card">
    <UHeader>

      <div slot="right">
        <el-button type="success" size="mini" @click="showDialog=true">添加</el-button>
      </div>
    </UHeader>
    <UTable ref="mTable" :columns="columns" :search-api="getUsers" />

    <el-dialog :visible.sync="showDialog" :append-to-body="true" :close-on-click-modal="false" width="400px">

      <AvatarUploader tips="上传头像"/>
      <el-form ref="form" :model="userForm" :rules="rules" style="padding: 0px 20px 0px 20px" label-width="80px" label-position="right" size="small">
        <el-form-item label="用户名" prop="loginName">
          <el-input v-model="userForm.loginName"/>
        </el-form-item>
        <el-form-item label="用户名" prop="nickn">
          <el-input v-model="userForm.nickn"/>
        </el-form-item>
        <el-form-item label="密码" prop="loginPwd">
          <el-input v-model="userForm.loginPwd" type="password" placeholder="设置密码.默认为6个8"/>
        </el-form-item>
        <el-form-item label="角色" >
          <RolesSelect :roles.sync="userForm.roles"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="width: 98%" @click="save">{{ stepsActive!==2?'下一步':'保存' }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UHeader from '@/components/UHeader'
import UTable from '@/components/UTable'
import AvatarUploader from '@/components/AvatarUploader'
import RolesSelect from '@/components/RolesSelect'

import { addAmin, getUsers } from '@/api/user'
export default {
  components: { UHeader, UTable, AvatarUploader, RolesSelect },
  data: function() {
    var phoneValidator = (rule, value, callback) => {
      debugger
      if (!value) {
        callback()
        return
      }
      const partten = /^1[3,5,8]\d{9}$/
      if (!partten.test(value)) {
        callback(new Error(rule.message))
      }
    }
    return {
      getUsers: getUsers,
      userForm: { loginName: '' },
      rules: {
        loginName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        nickn: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
        phone: [
          { validator: phoneValidator, trigger: 'blur', message: '请输入正确的手机号码' }
        ],
        email: [
          { type: 'email', message: '请输入正确的Email', trigger: 'blur' }
        ],
        loginPwd: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          { min: 6, max: 12, message: '密码强度度在 6 到 12 个字符', trigger: 'blur' }
        ]

      },
      showDialog: false,
      columns: [
        { prop: 'profile', label: '头像', type: 'avatar', width: '60px' },
        { prop: 'loginName', label: '登录帐号', search: { type: 'text', placeholder: '请输入车辆编号' }},
        { prop: 'nickn', label: '昵称', search: { type: 'area', placeholder: '请选择地区' }},
        { prop: 'phone', label: '手机号码' },
        { prop: 'email', label: 'E-Mail' },
        {
          prop: 'sex',
          label: '性别',
          filters: [{ text: '男', value: 1 }, { text: '女', value: 0 }],
          formatter: function(row, colum) {
            switch (row.sex) {
              case '1':
                return '男'
              case '0':
                return '女'
            }
          }
        },
        {
          prop: 'roles', label: '角色', formatter: function(row, colum) {
            var roles = ''
            if (row.roles.length === 0) {
              roles = '--/--'
              return roles
            }
            row.roles.forEach(r => {
              roles += r.roleName + ','
            })
            return roles.substring(0, roles.length - 1)
          }
        },
        { prop: 'enabled', label: '状态', filters: [{ text: '启用', value: 1 }, { text: '禁用', value: 0 }] },
        { prop: 'createtime', label: '注册时间' }]
    }
  },
  methods: {
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          addAmin(this.userForm).then(res => {
            alert(111)
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
